<!--
 * @Description: 找回密码
 * @Author: chaizhou
 * @Date: 2023-02-22 15:25:20
 * @LastEditTime: 2023-02-28 15:08:50
-->
<template>
  <div class="loginFormWrap">
    <h2>找回密码</h2>
    <template v-if="step === 1">
      <el-form ref="ruleFormRef" status-icon label-width="0" class="demo-ruleForm">
        <el-form-item prop="pass">
          <el-input v-model="phone" placeholder="请输入您的手机号码" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input placeholder="请输入验证码" v-model="code" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="
              () => {
                step.value++
              }
            "
            >下一步</el-button
          >
        </el-form-item>
      </el-form>
      <span
        class="hoverText"
        @click="
          () => {
            // mode.value = 'login';
            emits('mode', 'login')
          }
        "
        >返回登录</span
      >
    </template>

    <template v-else>
      <el-form ref="ruleFormRef" status-icon label-width="0" class="demo-ruleForm">
        <el-form-item prop="pass">
          <el-input v-model="phone" placeholder="请输入新密码" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input placeholder="再次确认密码" v-model="code" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const emits = defineEmits(['mode'])
// const props = defineProps({
//   mode: String,
// });
const step = ref(1)
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="less"></style>
